<template>
  <div>
    <div>
      <h4>改良Barthel指数评估量表</h4>
      <el-row type="flex" justify="space-between">
        <el-col :span="5">
          <div>
            <el-button type="primary" @click="openDialog">填写《改良Barthel指数评估量表》</el-button>
          </div>
        </el-col>
        <el-col :span="3">
          <div>
            <el-input v-model="pgForm.barthel2_input1" placeholder="" readonly style="width: 70%;"></el-input>
            <span> 分</span>
          </div>
        </el-col>
        <el-col :span="10">
          <div>
            <el-input v-model="pgForm.barthel2_input2" readonly></el-input>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      title="改良Barthel指数评估量表"
      :visible.sync="barthel2_dialogVisible"
      width="50%"
      :before-close="handleClose">
      <div class="one">
        <div class="eat">
          1、大便
        </div>
        <div class="list1">
          <el-radio-group v-model.number="pgForm.barthel2_radio1" class="el-radio-group">
            <el-radio label="'0分：完全大便失禁'" class="el-radio1">0分：完全大便失禁</el-radio>
            <br>
            <el-radio label="'2分：每月有超过一半时间出现大便失禁'" class="el-radio1">2分：每月有超过一半时间出现大便失禁</el-radio>
            <br>
            <el-radio label="'5分：每月有一半或以下时间出现大便失禁'" class="el-radio1">5分：每月有一半或以下时间出现大便失禁</el-radio>
            <br>
            <el-radio label="'8分：每月不多于一次的大便失禁'" class="el-radio1">8分：每月不多于一次的大便失禁</el-radio>
            <br>
            <el-radio label="'10分：没有大便失禁'" class="el-radio1">10分：没有大便失禁</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="two">
        <div class="transfer">
          2、小便
        </div>
        <div class="list2">
          <el-radio-group v-model.number="pgForm.barthel2_radio2" class="el-radio-group">
            <el-radio label="'0分：完全小便失禁'" class="el-radio1">0分：完全小便失禁</el-radio>
            <br>
            <el-radio label="'2分：经常小便失禁'" class="el-radio1">2分：经常小便失禁</el-radio>
            <br>
            <el-radio label="'5分：日间保持干爽，夜间小便失禁'" class="el-radio1">5分：日间保持干爽，夜间小便失禁</el-radio>
            <br>
            <el-radio label="'8分：整天保持干爽但中间出现使劲'" class="el-radio1">8分：整天保持干爽但中间出现使劲</el-radio>
            <br>
            <el-radio label="'10:分：没有小便失禁'" class="el-radio1">10:分：没有小便失禁</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="three">
        <div class="decoration">
          3、修饰
        </div>
        <div class="list3">
          <el-radio-group v-model.number="pgForm.barthel2_radio3" class="el-radio-group">
            <el-radio label="'0分：完全依赖'" class="el-radio1">0分：完全依赖</el-radio>
            <br>
            <el-radio label="'2分:需最大帮助'" class="el-radio1">2分:需最大帮助</el-radio>
            <br>
            <el-radio label="'3分：能参与大部分活动'" class="el-radio1">3分：能参与大部分活动</el-radio>
            <br>
            <el-radio label="'4分：能准备和收拾时需协助'" class="el-radio1">4分：能准备和收拾时需协助</el-radio>
            <br>
            <el-radio label="'5分：完全洗脸、梳头、刷牙、剃须或化妆'" class="el-radio1">5分：完全洗脸、梳头、刷牙、剃须或化妆</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="four">
        <div class="wc">
          4、如厕
        </div>
        <div class="list4">
          <el-radio-group v-model.number="pgForm.barthel2_radio4" class="el-radio-group">
            <el-radio label="'0分：完全依赖'" class="el-radio1">0分：完全依赖</el-radio>
            <br>
            <el-radio label="'2分：需最大帮助'" class="el-radio1">2分：需最大帮助</el-radio>
            <br>
            <el-radio label="'5分：能参与大部分活动'" class="el-radio1">5分：能参与大部分活动</el-radio>
            <br>
            <el-radio label="'8分：需有人从旁边监督或提示'" class="el-radio1">8分：需有人从旁边监督或提示</el-radio>
            <br>
            <el-radio label="'10分：自行如厕'" class="el-radio1">10分：自行如厕</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="five">
        <div class="take-shower">
          5、吃饭
        </div>
        <div class="list5">
          <el-radio-group v-model.number="pgForm.barthel2_radio5" class="el-radio-group">
            <el-radio label="'0分：完全依赖'" class="el-radio1">0分：完全依赖</el-radio>
            <br>
            <el-radio label="'2分：某种程度上能运用餐具，真个过程需别人协助'" class="el-radio1">2分：某种程度上能运用餐具，真个过程需别人协助</el-radio>
            <br>
            <el-radio label="'5分：能使用餐具，在某些过程中需协助'" class="el-radio1">5分：能使用餐具，在某些过程中需协助</el-radio>
            <br>
            <el-radio label="'8分：能准备和收拾时需协助'" class="el-radio1">8分：能准备和收拾时需协助</el-radio>
            <br>
            <el-radio label="'10分：自行用食'" class="el-radio1">10分：自行用食</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="six">
        <div class="walk">
          6、转移（床-椅）
        </div>
        <div class="list6">
          <el-radio-group v-model.number="pgForm.barthel2_radio6" class="el-radio-group">
            <el-radio label="'0分：完全依赖'" class="el-radio1">0分：完全依赖</el-radio>
            <br>
            <el-radio label="'3分：整个过程中需要别人帮忙'" class="el-radio1">3分：整个过程中需要别人帮忙</el-radio>
            <br>
            <el-radio label="'8分：能参与大部分活动，在某些过程需协助'" class="el-radio1">8分：能参与大部分活动，在某些过程需协助</el-radio>
            <br>
            <el-radio label="'12分：需有人提示'" class="el-radio1">12分：需有人提示</el-radio>
            <br>
            <el-radio label="'15分：完全独立'" class="el-radio1">15分：完全独立</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="seven">
        <div class="stairs">
          7、行走
        </div>
        <div class="list7">
          <el-radio-group v-model.number="pgForm.barthel2_radio7" class="el-radio-group">
            <el-radio label="'0分：完全不能'" class="el-radio1">0分：完全不能</el-radio>
            <br>
            <el-radio label="'3分：整个过程需要别人协助'" class="el-radio1">3分：整个过程需要别人协助</el-radio>
            <br>
            <el-radio label="'8分：能参与大部分活动，在某些过程中需要协助'" class="el-radio1">8分：能参与大部分活动，在某些过程中需要协助</el-radio>
            <br>
            <el-radio label="'12分：可步行一段距离（<50米）或需监督或提示'" class="el-radio1">12分：可步行一段距离（<50米）或需监督或提示</el-radio>
            <br>
            <el-radio label="'15分：可步行50米'" class="el-radio1">15分：可步行50米</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="eight">
        <div class="clothes">
          * 轮椅操作
        </div>
        <div class="list8">
          <el-radio-group v-model.number="pgForm.barthel2_radio8" class="el-radio-group">
            <el-radio label="'0分：完全不能'" class="el-radio1">0分：完全不能</el-radio>
            <br>
            <el-radio label="'1分：可在平地上移动短距离，整个过程需要别人协助'" class="el-radio1">1分：可在平地上移动短距离，整个过程需要别人协助</el-radio>
            <br>
            <el-radio label="'3分：能参与大部分轮椅活动，某些过程需协助'" class="el-radio1">3分：能参与大部分轮椅活动，某些过程需协助</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="nine">
        <div class="shit">
          8、穿衣
        </div>
        <div class="list9">
          <el-radio-group v-model.number="pgForm.barthel2_radio9" class="el-radio-group">
            <el-radio label="'0分：完全依赖'" class="el-radio1">0分：完全依赖</el-radio>
            <br>
            <el-radio label="'2分：某种程度上能参与，某个过程需协助'" class="el-radio1">2分：某种程度上能参与，某个过程需协助</el-radio>
            <br>
            <el-radio label="'5分：能参与大部分活动，在某些过程仍需协助'" class="el-radio1">5分：能参与大部分活动，在某些过程仍需协助</el-radio>
            <br>
            <el-radio label="'8分：在准备和收拾时需协助或需监督或需协助'" class="el-radio1">8分：在准备和收拾时需协助或需监督或需协助</el-radio>
            <br>
            <el-radio label="'10分：自行穿衣'" class="el-radio1">10分：自行穿衣</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="ten">
        <div class="urine">
          9、上下楼梯
        </div>
        <div class="list10">
          <el-radio-group v-model.number="pgForm.barthel2_radio10" class="el-radio-group">
            <el-radio label="'0分：完全依赖'" class="el-radio1">0分：完全依赖</el-radio>
            <br>
            <el-radio label="'2分：整个过程中需要别人协助'" class="el-radio1">2分：整个过程中需要别人协助</el-radio>
            <br>
            <el-radio label="'5分：能参与大部分活动，在某些过程仍需协助'" class="el-radio1">5分：能参与大部分活动，在某些过程仍需协助</el-radio>
            <br>
            <el-radio label="'8分：在准备和收拾时需协助或需监督或需协助'" class="el-radio1">8分：在准备和收拾时需协助或需监督或需协助</el-radio>
            <br>
            <el-radio label="'10分：可上下楼梯两段（可用扶手或助行器）'" class="el-radio1">10分：可上下楼梯两段（可用扶手或助行器）</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="ten2">
        <div class="urine">
          10、洗澡
        </div>
        <div class="list10">
          <el-radio-group v-model.number="pgForm.barthel2_radio11" class="el-radio-group">
            <el-radio label="'0分：完全依赖'" class="el-radio1">0分：完全依赖</el-radio>
            <br>
            <el-radio label="'1分：整个过程需要别人协助'" class="el-radio1">1分：整个过程需要别人协助</el-radio>
            <br>
            <el-radio label="'3分：能参与大部分活动，在某些过程仍需协助'" class="el-radio1">3分：能参与大部分活动，在某些过程仍需协助</el-radio>
            <br>
            <el-radio label="'4分：在准备和收拾时需协助或需监督或需协助'" class="el-radio1">4分：在准备和收拾时需协助或需监督或需协助</el-radio>
            <br>
            <el-radio label="'5分：自行洗澡'" class="el-radio1">5分：自行洗澡</el-radio>
          </el-radio-group>
        </div>
      </div>

      <div class="lastDiv">
        <span>总分 </span>
        <el-input  v-model="pgForm.barthel2_input1" placeholder="" readonly style="width: 10%;margin-right: 100px"></el-input>
        <el-dropdown class="word" trigger="click" @command="handleCommand" v-if="$route.path == '/patient/assess/detail/'">
          <el-button type="primary">
            输出文档<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="pdf">PDF</el-dropdown-item>
            <el-dropdown-item command="docx">Word</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import {sendJumpPdfData, sendJumpWordData} from "@/api/gaoxin/word";
export default {
  name: "barthel2",
  title: "改良Barthel指数评估量表",
  created() {
    if(this.istrans){
      this.pgForm=this.fromdata
    }
  },
  props: {
    fromdata:{},
    istrans:false,
  },
  data() {
    return {
      barthel2_dialogVisible: false,
      pgForm: {
        barthel2_radio1: '',
        barthel2_radio2: '',
        barthel2_radio3: '',
        barthel2_radio4: '',
        barthel2_radio5: '',
        barthel2_radio6: '',
        barthel2_radio7: '',
        barthel2_radio8: '',
        barthel2_radio9: '',
        barthel2_radio10: '',
        barthel2_radio11: '',
        barthel2_input1: 0,
        barthel2_input2: '',
        barthel2_input7: '',
      }
    }
  },
  computed:{
    sum() {
      return (this.pgForm.barthel2_radio1.split('分')[0].slice(1))*1+(this.pgForm.barthel2_radio2.split('分')[0].slice(1))*1+(this.pgForm.barthel2_radio3.split('分')[0].slice(1))*1+(this.pgForm.barthel2_radio4.split('分')[0].slice(1))*1+(this.pgForm.barthel2_radio5.split('分')[0].slice(1))*1+(this.pgForm.barthel2_radio6.split('分')[0].slice(1))*1+(this.pgForm.barthel2_radio7.split('分')[0].slice(1))*1+(this.pgForm.barthel2_radio8.split('分')[0].slice(1))*1+(this.pgForm.barthel2_radio9.split('分')[0].slice(1))*1+(this.pgForm.barthel2_radio10.split('分')[0].slice(1))*1+(this.pgForm.barthel2_radio11.split('分')[0].slice(1))*1
    },
    taskId() {
      return this.$route.query.taskId;
    }
  },
  watch: {
    sum(val){
      if (this.$route.path != "/patient/assess/detail/") {
        this.pgForm.barthel2_input7 = val
      }
    },
    "pgForm.barthel2_input1"() {
      if (this.pgForm.barthel_input1 >= 0 & this.pgForm.barthel_input1 <= 20) {
        this.pgForm.barthel2_input2 = '评定结果：生活完全依赖。'
      }
      else if (this.pgForm.barthel_input1 >= 21 & this.pgForm.barthel_input1 <= 40) {
        this.pgForm.barthel2_input2 = '评定结果：重度功能障碍，生活依赖明显。'
      }
      else if (this.pgForm.barthel_input1 >= 41 & this.pgForm.barthel_input1 <= 60) {
        this.pgForm.barthel2_input2 = '评定结果：中度功能障碍，生活需要帮助。'
      }
      else if (this.pgForm.barthel_input1 > 60 & this.pgForm.barthel_input1 < 100) {
        this.pgForm.barthel2_input2 = '评定结果：生活基本自理。'
      }
      else {
        this.pgForm.barthel2_input2 = '评定结果：正常。'
      }
    }
  },
  methods: {
    openDialog() {
      this.barthel2_dialogVisible = true;
    },
    //elementui dropdown 组件方法
    handleCommand(command) {
      this.sendData(command);
    },
    //跳转表 word pdf 下载
    sendData(type) {
      const loading = this.$loading({
        lock: true,
        text: '努力输出中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      if (type == 'docx') {
        sendJumpWordData({ taskId: this.taskId, jumpTableName: this.$options.name + "Jump" }).then(response => {
          if(response) {
            loading.close();
            this.$message({
              message: 'word文档输出成功！',
              type: 'success'
            });
          };
          const data = response;
          let url = window.URL.createObjectURL(data);   // 将二进制文件转化为可访问的url
          var a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = this.taskDate.assessName + '.docx';
          a.click();   // 模拟点击下载
          window.URL.revokeObjectURL(url);
        });
      }
      else {
        sendJumpPdfData({ taskId: this.taskId }).then(response => {
          if(response) {
            loading.close();
            this.$message({
              message: 'pdf文档输出成功！',
              type: 'success'
            });
          };
          const data = response;
          let url = window.URL.createObjectURL(data);   // 将二进制文件转化为可访问的url
          var a = document.createElement('a');
          document.body.appendChild(a);
          a.href = url;
          a.download = this.taskDate.assessName + '.pdf';
          a.click();   // 模拟点击下载
          window.URL.revokeObjectURL(url);
        });
      }
    },
  }
}
</script>

<style scoped>
div, h4, span, ul {
  list-style: none;
  box-sizing: border-box;
}

.el-row{
  margin: 10px 0;
  padding: 20px 20px;
  background-color: #f9f9f9;
  flex-wrap: wrap;
  flex-direction: row;
}

.barthel {
  margin-top: 10px;
}

.barthel div {
  float: left;
  height: 35px;
  line-height: 35px;
  border-radius: 5px;
}

.barthel .barthel-table {
  color: #fff;
  padding: 0 40px;
  font-size: 14px;
  background-color: #5493fa;
}

.barthel .barthel-score {
  margin-left: 50px;
}

.barthel-score div {
  width: 90px;
  padding-left: 10px;
  border: 1px solid #cfcccf;
}

.barthel-score span {
  margin-left: 10px;
}

.barthel .result {
  width: 500px;
  padding-left: 10px;
  margin-left: 100px;
  border: 1px solid #cecbce;
}

.eldialog {
  cursor: pointer;
}

.barthel .score, .barthel .result {
  font-size: 14px;
  background-color: #eeebee;
}


.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .ten2 {
  margin-top: 25px;
}

.one .eat, .two .transfer, .three .decoration, .four .wc, .five .take-shower, .six .walk, .seven .stairs, .eight .clothes, .nine .shit, .ten .urine {
  border-radius: 5px;
  padding: 10px 15px;
  background-color: #f7f7fb;
}

.el-radio1, .el-radio2, .el-radio3, .el-radio4 {
  margin-top: 20px;
}

.el-radio1 {
  margin-left: 5px;
}

.sum {
  height: 50px;
  line-height: 50px;
  margin-top: 25px;
  background-color: #f7f7fb;
}

.sum span:first-child {
  margin-left: 20px;
}

.sum span:last-child {
  color: #fff;
  padding: 8px 15px;
  border-radius: 5px;
  margin-left: 40px;
  background-color: #008b90;
}
.lastDiv {
  margin-top: 50px;
}
.lastDiv /deep/.el-input__inner{
  color: #fff;
  text-align: center;
  background-color: #008b90;
}
</style>
